<template>

  <el-button text @click="dialogVisible = true">
    Click to open Dialog
  </el-button>

  <el-dialog v-model="dialogVisible" title="" width="30%" draggable>
    <span>It's a draggable Dialog</span>
    <div>
      <el-input label="字典类别代码"></el-input>
    </div>
    <div>
      <el-input label="字典类别描述"></el-input>
    </div>
    <div>
      <el-switch label="是否启用" :active-value="true" active-text="是" inactive-value="false" inactive-text="否"></el-switch>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          Confirm
        </el-button>
      </span>
    </template>
  </el-dialog>
  <el-button>新建分类</el-button>
  <el-table :data="dictList" style="width: 100%">
    <el-table-column prop="code" label="字典编码" width="150"></el-table-column>
    <el-table-column prop="label" label="字典名" width="150"></el-table-column>
    <el-table-column prop="description" label="字典备注"></el-table-column>
    <el-table-column prop="enabled" label="字典状态" width="100"></el-table-column>
    <el-table-column label="管理">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script lang="ts">
import {Options, Vue} from 'vue-class-component';
import DictionaryModel from "@/models/DictionaryModel";
import {getDict} from "@/apis/dictionary.api";
import {BackendPageModel} from "@/models/BackendPageModel";

@Options({})
export default class DictView extends Vue {
  private dialogVisible = false;
  private dictList: DictionaryModel[] = [];

  created(): void {
    getDict().then((value: BackendPageModel<DictionaryModel>) => {
      this.dictList = value.content;
    })
  }

  handleDelete(index: number, row: DictionaryModel): void {
    console.log(row)
  }

  handleEdit(index: number, row: DictionaryModel): void {
    console.log(row)
  }
}
</script>

<style scoped>

</style>